<template>
  <div v-cloak class="aui-wrapper aui-page__iframe">
    <div class="aui-content__wrapper">
      <div class="aui-content">
        <el-card shadow="never" class="aui-card--fill">
          <div class="mod-sys__user">
            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
              <el-form-item>
                <el-input size="small" v-model="dataForm.username" placeholder="用户名" clearable></el-input>
              </el-form-item>
              <el-form-item>
                <el-button size="small" @click="getDataList()">查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button size="small" type="primary" @click="addOrUpdateHandle()">新增</el-button>
              </el-form-item>
              <el-form-item>
                <el-button size="small" type="danger" @click="deleteHandle()">删除</el-button>
              </el-form-item>
              <el-form-item>
                <el-button size="small" type="info" @click="exportHandle()">导出</el-button>
              </el-form-item>
            </el-form>
            <el-table
                v-loading="dataListLoading"
                :data="dataList"
                border
                @selection-change="dataListSelectionChangeHandle"
                @sort-change="dataListSortChangeHandle"
                style="width: 100%;">
              <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
              <el-table-column prop="username" label="用户名" sortable="custom" header-align="center"
                               align="center"></el-table-column>
              <el-table-column prop="deptName" label="所属部门" header-align="center"
                               align="center"></el-table-column>
              <el-table-column prop="email" label="邮箱" header-align="center" align="center"></el-table-column>
              <el-table-column prop="mobile" label="手机号" sortable="custom" header-align="center"
                               align="center"></el-table-column>
              <el-table-column prop="status" label="状态" sortable="custom" header-align="center" align="center">
                <template #default="scope">
                  <el-tag v-if="scope.row.status === 0" size="small" type="danger">停用</el-tag>
                  <el-tag v-else size="small" type="success">正常</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="createDate" label="创建时间" sortable="custom" header-align="center"
                               align="center" width="180"></el-table-column>
              <el-table-column label='handle' fixed="right" header-align="center" align="center" width="150">
                <template #default="scope">
                  <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
                  <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
                :current-page="page"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="limit"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="pageSizeChangeHandle"
                @current-change="pageCurrentChangeHandle">
            </el-pagination>
            <!-- 弹窗, 新增 / 修改 -->
            <UserAddOrUpper v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></UserAddOrUpper>

          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import UserAddOrUpper from "@/components/sys/UserAddOrUpper";
import {ref, reactive, onMounted, nextTick, getCurrentInstance, confirm} from 'vue';
import {getUserList, deleteUser,exportUser} from '@/network/sys/user'
import {ElMessage, ElMessageBox} from 'element-plus'

import {request} from "@/network/request";
import DataList from "@/utils/DataList";
export default {
  name: "user",
  components: {
    UserAddOrUpper
  },
  setup() {
		const {
		        dataForm,
		        mixinViewModuleOptions,
		        getDataList,
		        dataList,
		        total,
		        page,
		        limit,
		        dataListLoading,
		        dataListSelectionChangeHandle,
		        dataListSortChangeHandle,
		        pageSizeChangeHandle,
		        pageCurrentChangeHandle,
		        addOrUpdateHandle,
		        deleteHandle,
		        exportHandle,
		        addOrUpdateVisible,
		        dataListSelections,
		        addOrUpdate

		    } = DataList();

		    onMounted(() => {

		        mixinViewModuleOptions.value.getDataListURL = '/sys/user/page';
		        mixinViewModuleOptions.value.deleteURL = '/sys/user';
		        mixinViewModuleOptions.value.getDataListIsPage = true;
		        mixinViewModuleOptions.value.deleteIsBatch=true;
				mixinViewModuleOptions.value.exportURL='/sys/user/export' ;
		        dataForm.value.username = '';

		        if (mixinViewModuleOptions.value.activatedIsNeed) {
		            getDataList();
		        }

		    })
		    return {
		        dataForm,
		        mixinViewModuleOptions,
		        getDataList,
		        dataList,
		        total,
		        page,
		        limit,
		        dataListLoading,
		        dataListSelectionChangeHandle,
		        dataListSortChangeHandle,
		        pageSizeChangeHandle,
		        pageCurrentChangeHandle,
		        addOrUpdateHandle,
		        deleteHandle,
		        exportHandle,
		        addOrUpdateVisible,
		        dataListSelections,
		        addOrUpdate
		    }




    // const mixinViewModuleOptions = reactive({
    //   activatedIsNeed: true,    // 此页面是否在激活（进入）时，调用查询数据列表接口？
    //   getDataListURL: '/sys/user/page',
    //   getDataListIsPage: true,
    //   deleteURL: '/sys/user',
    //   deleteIsBatch: true,// 删除接口，是否需要批量？
    //   exportURL: '/sys/user/export',// 导出接口，API地址
    //   deleteIsBatchKey: 'id'// 删除接口，批量状态下由那个key进行标记操作？比如：pid，uid...
    // })
    // // 查询条件
    // const dataForm = reactive({
    //   username: ''
    // })

    // const dataList = ref([]);             // 数据列表
    // const order = ref('')                 // 排序，asc／desc
    // const orderField = ref('')            // 排序，字段
    // const page = ref(1)                  // 当前页码
    // const limit = ref(10)                // 每页数
    // const total = ref(0)                 // 总条数
    // const dataListLoading = ref(false)    // 数据列表，loading状态
    // const dataListSelections = ref([])     // 数据列表，多选项
    // const addOrUpdateVisible = ref(false)   // 新增／更新，弹窗visible状态


    // const getDataList = () => {
    //   //var self = this;
    //   dataListLoading.value = true;

    //   request({
    //     url: '/sys/user/page',
    //     method: 'get',
    //     data: _.merge({
    //       order: order,
    //       orderField: orderField,
    //       page: mixinViewModuleOptions.getDataListIsPage ? page : null,
    //       limit: mixinViewModuleOptions.getDataListIsPage ? limit : null
    //     }, dataForm)
    //   }).then(function (res) {
    //     dataListLoading.value = false;
    //     if (res.code !== 0) {
    //       dataList.value = [];
    //       total.value = 0;
    //       return ElMessage.error(res.msg);
    //     }
    //     dataList.value = mixinViewModuleOptions.getDataListIsPage ? res.data.list : res.data;
    //     if (res.data.param) {
    //       dataForm.value = res.data.param;
    //     }
    //     total.value = mixinViewModuleOptions.getDataListIsPage ? res.data.total : 0;
    //   }).catch(function () {
    //     dataListLoading.value = false;
    //   })
    // }
    // // 多选
    // const dataListSelectionChangeHandle = (val) => {
    //   dataListSelections.value = val;
    // }
    // // 排序
    // const dataListSortChangeHandle = (data) => {
    //   if (!data.order || !data.prop) {
    //     order.value = '';
    //     orderField.value = '';
    //     return false;
    //   }
    //   order.value = data.order.replace(/ending$/, '');
    //   orderField.value = data.prop.replace(/([A-Z])/g, '_$1').toLowerCase();
    //   getDataList();
    // }
    // // 分页, 每页条数
    // const pageSizeChangeHandle = (val) => {
    //   page.value = 1;
    //   limit.value = val;
    //   getDataList();
    // }
    // // 分页, 当前页
    // const pageCurrentChangeHandle = (val) => {
    //   page.value = val;
    //   getDataList();
    // }

    // const addOrUpdate = ref(null)

    // const CurrentInstance = getCurrentInstance();
    // // 新增 / 修改
    // const addOrUpdateHandle = (id) => {
    //   // var self = this;

    //   addOrUpdateVisible.value = true;
    //   nextTick(function () {
    //     addOrUpdate.value.dataForm.id = id;
    //     addOrUpdate.value.init();
    //   })
    // }
    // // 删除
    // const deleteHandle = (id) => {
    //   // var self = this;
    //   if (mixinViewModuleOptions.deleteIsBatch && !id && dataListSelections.length <= 0) {
    //     return ElMessage({
    //       message: 'prompt.deleteBatch',
    //       type: 'warning',
    //       duration: 1000
    //     });
    //   }
    //   ElMessageBox.confirm('确定进行删除操作?', '提示', {
    //     confirmButtonText: 'confirm',

    //     cancelButtonText: 'cancel',
    //     type: 'warning'
    //   }).then(function () {

    //     let data = mixinViewModuleOptions.deleteIsBatch ?
    //       id ? [id+''] : dataListSelections.map(function (item) {
    //         return item[mixinViewModuleOptions.deleteIsBatchKey]+'';
    //       })
    //      : [id+'']

    //     deleteUser(data)
    //         .then(function (res) {
    //           if (res.code !== 0) {
    //             return ElMessage.error(res.msg);
    //           }
    //           ElMessage({
    //             message: 'prompt.success',
    //             type: 'success',
    //             duration: 500,
    //             onClose: function () {
    //               getDataList();
    //             }
    //           });
    //         }).catch(function () {
    //     });
    //   }).catch(function () {
    //   });
    // }
    // // 导出
    // const exportHandle = () => {
    //  // window.location.href = window.SITE_CONFIG['apiURL'] + mixinViewModuleOptions.exportURL + '?' + Qs.stringify(this.dataForm);
    //   exportUser(dataForm).then((res)=>{
    //     let fileName = 'SamplePointsDetail.xls'                      //excel文件名称
    //     let blob = new Blob([res.data], { type: 'application/x-xls'})   //word文档为msword,pdf文档为pdf，excel文档为x-xls
    //     if (window.navigator.msSaveOrOpenBlob) {
    //       navigator.msSaveBlob(blob, fileName);
    //     } else {
    //       var link = document.createElement('a');
    //       link.href = window.URL.createObjectURL(blob);
    //       link.download = fileName;
    //       link.click();
    //       window.URL.revokeObjectURL(link.href);
    //     }

    //   })
    // }

    // onMounted(() => {
    //   getDataList();
    // })

    // return {
    //   dataForm,
    //   mixinViewModuleOptions,
    //   getDataList,
    //   dataList,
    //   total,
    //   page,
    //   limit,
    //   dataListLoading,
    //   dataListSelectionChangeHandle,
    //   dataListSortChangeHandle,
    //   pageSizeChangeHandle,
    //   pageCurrentChangeHandle,
    //   addOrUpdateHandle,
    //   deleteHandle,
    //   exportHandle,
    //   addOrUpdateVisible,
    //   dataListSelections,
    //   CurrentInstance,
    //   addOrUpdate
    // }

  }



 

}
</script>

<style scoped>

</style>